// 首先需要渲染页面  需要点开学员信息的时候能看到数据
// 定义一函数 发送请求获取数据 渲染页面

// 发送请求 获取 数据渲染页面
const tbody = document.querySelector('tbody');


function getStudentList() {
  axios.get('/student/list').then((result) => {
    // console.log(result);
    if (result.data.code ===0) {
        const list = result.data.data;
        console.table(list);

        const html = list.reduce((h,v)=>h+`
        <tr>
        <th scope="row">${v.id }</th>
        <td>${v.name}</td>
        <td>${v.age}</td>
        <td>${v.sex}</td>
        <td>${v.group}</td>
        <td>${v.phone}</td>
        <td>${v.salary}</td>
        <td>${v.truesalary}</td>
        <td>${v.province + v.city +v.county}</td>
        <td>
          <button type="button" class="btn btn-primary btn-sm">修改</button>
          <button type="button" class="btn btn-danger btn-sm">删除</button>
        </td>
      </tr>    
        `,'');
        tbody.innerHTML = html
    }
  });

}
// 发送请求 获取数据渲染页面
getStudentList()

const provinceselect = document.querySelector('#addModal [name=province]');
const cityselect = document.querySelector('#addModal [name=city]');
const countyselect = document.querySelector('#addModal [name=county]');
axios.get('/geo/province').then((result)=>{
  // console.log(result);
  
  provinceselect.innerHTML = result.data.reduce((h,v)=>h+`<option value='${v}'>${v}</option>`,`<option value=''>--省--</option>`)
})


// 用户确定了那个省  才能获取城市数据
// 需要给省 绑定 change 事件
provinceselect.addEventListener('change',function(){
  // console.log(provinceselect.value);
  axios.get('/geo/city',{params:{pname:provinceselect.value}}).then((result)=>{
    // console.log(result);
    cityselect.innerHTML = result.data.reduce((h,v)=>h+`<option value='${v}'>${v}</option>`,`<option value=''>--市--</option>`)
  })
})


// 新增中 市  change事件
cityselect.addEventListener('change', function () {
  // console.log(citySelect.value);

  // 根据接口要求 拼接参数
  const params = {
    // 省
    pname: provinceselect.value,
    // 市
    cname: cityselect.value,
  };

  // 发送请求 获取县
  axios.get('/geo/county', { params }).then((result) => {
    countyselect.innerHTML = result.data.reduce(
      (h, v) => h + `<option value="${v}">${v}</option>`,
      `<option value="">--县--</option>`
    );
  });
});